<template>
	<view id="my-cptt">
		<view class="cptt-title">
			我报名的比赛
		</view>
		<u-collapse
		ref="cpttCollapse"
		>
			<u-collapse-item 
			v-for="(i, index) in CPTTS" 
			:key="i.id"
			:disabled = "i.state==-1"
			:index="index"
			:open="index==0"
			:title="i.name"
			@change="cpllapseChange"
			>
				<template #title>
					<view class="my-cptt-name"
					:style="tagShow[index]?'width: calc(750rpx - 150px);':'width: 100%'"
					>
					{{index}}:{{i.name}}
					</view>
					<u-tag
					v-show="tagShow[index]"
					:type="i.state==1?'success':'warning'" 
					:text="i.state==1?'报名中':'已截止'"
					size="mini"
					/>
					<u-tag 
					v-show="tagShow[index]"
					:type="i.state==-1?'error':'success'"
					:text="i.state==-1?'已开始':'未开始'"
					size="mini"
					/>
				</template>
				<view class="my-cptt-main">
					<text v-if="i.state != -1">
						距比赛开始还有
						<b>{{Math.ceil(
							(new Date(i.goingtime) - new Date())/3600
						)}}</b>
						h
					</text>
					<text v-else style="color: red;">
						看什么看!比赛已经开始啦!!
					</text>
					<br>
					<view class="paisai" v-if="i.groupingUsers">
					<text class="text">比赛分组:</text>
						<view class="p-fa">
							<hr align="left">
							<u-table 
							style="margin: 20rpx; width: 80%;"
							align="left" padding="20rpx">
								<u-tr v-for="item in i.groupingUsers">
									<u-td :style="
									item === $store.state.login.user.uName
									?'font-weight: 700;color:#0089ff;zoom:1.1':''">{{item}}</u-td>
								</u-tr>
							</u-table>
							<hr align="left">
						</view>
					</view>
					<br>
					<u-button
					type="warning"
					size="medium"
					plain
					rippe
					@click="i.state===1?mB2=true:mB1=true;delIndex = index"
					>取消报名</u-button>
				</view>
			</u-collapse-item>
		</u-collapse>
		<u-modal
		v-model="mB1"
		title="警告"
		show-cancel-button
		@confirm="mB2=true"
		@cancel="mB1 = false"
		>
			<template #default>
				<view class="msgbox">
					<text>比赛已经截止</text> <br>
					<text>取消报名将不能再继续报名</text>
				</view>
			</template>
		</u-modal>
		<u-modal
		v-model="mB2"
		title="取消报名"
		content="确认要取消报名嘛?"
		show-cancel-button
		@confirm="delApplay"
		@cancel="mB2 = false"
		></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		name:"MyCptt",
		data(){
			return{
				CPTTS:[],
				activeCptt:'0',
				// isGroup:[]
				openThis:0,
				tagShow:[],
				mB2:false,
				mB1:false,
				delIndex:undefined
			}
		},
		created() {
			//所有cptt_id 
			uni.showLoading()
			let uId = this.$store.state.login.user.uId
			if(uId == undefined)//不为空
				uni.navigateTo({
					url:'/pages/login/login'
				})
			else
				setTimeout(()=>{
					this.creatMain(uId)
				},1000)
		},
		onPullDownRefresh() {
			this.creatMain(this.$store.state.login.user.uId)
			uni.stopPullDownRefresh()
		},
		computed:{
		},
		methods:{
			cpllapseChange(e){
				if(e.show){
					this.tagShow[this.openThis] = true
					this.openThis = e.index
					this.tagShow[e.index] = false
				}else{
					this.openThis = 0
					this.tagShow[e.index] = true
				}
			},
			creatMain(uId){
				this.kRequest('get','./api/GetApplay?type=1&key='+uId)
					.then(result=>{
							this.CPTTS = this.$store.state.cptts
									.filter(e=>result.includes(e.id))
						return this.kRequest('get',"./api/GetGroup?key="+uId)
					})
					.then(e=>{
						let result = e.data
						result.forEach(e=>{
							this.CPTTS.forEach(cptt=>{
								if(e.id == cptt.id)
									cptt.groupingUsers = e.groupingUsers
							})
						})
						this.tagShow = new Array(this.CPTTS.length).fill(true)
						this.tagShow[this.openThis] = false
						this.$nextTick(() => {
							this.$refs.cpttCollapse.init()
							uni.hideLoading()
						})
					})
					.catch(error=>{
						console.log(error)
						uni.hideLoading()
						this.$refs.uToast.show({
							title: '加载失败',
							type: 'error',
						})
					})
			},
			delApplay(){
				this.kRequest('post','./api/MakeApplay',
					{
						applay:{
								cid: this.CPTTS[this.delIndex].id,
								uid: this.$store.state.login.user.uId
							   },
						isApplay:true,
						blacklist:false,
					})
					.then(e=>{
						this.$refs.uToast.show({
							title: e.info,
							type: 'success',
							position: 'top'
						})
					})
					.catch(e=>{
						this.$refs.uToast.show({
							title: e.info,
							type: 'error',
							position: 'top'
						})
					})
			},
		}
		
	}
</script>

<style scoped lang="scss">
#my-cptt{
	.cptt-title{
		margin: 0;
		padding: 16px 16px 16px;
		font-weight: 700;
		font-size: 14px;
		line-height: 16px;
	}
	.my-cptt-name{
		color: #000 !important;
		white-space: nowrap;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 700;
	}
	.my-cptt-main{
		padding-left: 1.25rem;
		color: #000000;
		.paisai{
			padding-top: 1rem;
			.p-fa{
				border-left: 2.5px solid #ebedf0;
				hr{
					width: 10%;
					// background: black;
					background: #ebedf0;
					height: 2.5px;
					border: none;
				}
			}
			.text{
				font-weight: 700;
			}
		}
	}
	.msgbox{
		padding: 48rpx;
		font-size: 30rpx;
		text-align: center;
		color: #606266;
	}
}
</style>